<template>
  <div class="layout-container">
    <div class="main-content">
      <!-- 左侧菜单 -->
      <div :class="['side-menu', { 'mobile-visible': isMobileMenuVisible }]">
        <SideMenu />
      </div>
      <!-- 主内容区域 -->
      <div class="content">
        <!-- 顶部菜单 -->
        <header class="top-menu">
          <div class="top-menu-left">
            <!-- 移动端菜单按钮 -->
            <button class="mobile-menu-btn" @click="toggleMobileMenu" v-if="isMobile">
              <i class="el-icon-menu"></i>
            </button>
            <!-- Logo -->
            <div class="logo">
              <!-- <img src="@/assets/logo.png" alt="Logo" class="logo-img" /> -->
              <span class="logo-text">盼寻密友</span>
            </div>
          </div>
          <div class="top-menu-center">
            <!-- 搜索框 -->
            <div class="search-box">
              <input 
                type="text" 
                placeholder="搜索联系人或消息..." 
                class="search-input"
                v-model="searchQuery"
              />
              <button class="search-btn">
                <i class="el-icon-search"></i>
              </button>
            </div>
          </div>
          <div class="top-menu-right">
            <!-- 窗口控制按钮 -->
            <div class="window-controls">
              <button class="control-btn minimize-btn" @click="minimizeWindow">
                <i class="el-icon-minus"></i>
              </button>
              <button class="control-btn maximize-btn" @click="maximizeWindow">
                <i class="el-icon-full-screen"></i>
              </button>
              <button class="control-btn close-btn" @click="closeWindow">
                <i class="el-icon-close"></i>
              </button>
            </div>
            <!-- 用户信息 -->
            <el-dropdown @command="handleUserCommand" trigger="click">
              <div class="user-info">
                <!-- <img
                  src="@/assets/default-avatar.png"
                  alt="User Avatar"
                  class="user-avatar"
                /> -->
                <span class="user-name">{{ userName }}</span>
                <i class="el-icon-arrow-down el-icon--right"></i>
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="profile">个人中心</el-dropdown-item>
                  <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link">
                {{ $t("language") }}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="zh">中文</el-dropdown-item>
                  <el-dropdown-item command="en">English</el-dropdown-item>
                  <el-dropdown-item command="ja">日本語</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <el-dropdown @command="handleThemeChange">
              <span class="el-dropdown-link">
                {{ $t("theme") }}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="white">{{ $t("white") }}</el-dropdown-item>
                  <el-dropdown-item command="dark">{{ $t("dark") }}</el-dropdown-item>
                  <el-dropdown-item command="green">{{ $t("green") }}</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </header>
        <div class="content-main">
          <router-view />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import SideMenu from "./SideMenu.vue";
import { useI18n } from "vue-i18n";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import { ref, reactive, onMounted, onBeforeUnmount } from "vue";

export default {
  name: "Layout",
  components: {
    SideMenu,
  },
  setup() {
    const { locale } = useI18n();
    const router = useRouter();
    const searchQuery = ref("");
    const isMobile = ref(false);
    const isMobileMenuVisible = ref(false);
    const currentTheme = ref("white"); // 默认主题

    // 检查是否为移动端
    const checkIsMobile = () => {
      isMobile.value = window.innerWidth < 768;
      if (!isMobile.value) {
        isMobileMenuVisible.value = false;
      }
    };

    // 切换移动端菜单
    const toggleMobileMenu = () => {
      isMobileMenuVisible.value = !isMobileMenuVisible.value;
    };

    // 点击其他区域隐藏移动端菜单
    const hideMobileMenu = (event) => {
      if (isMobile.value && isMobileMenuVisible.value) {
        const sideMenu = document.querySelector('.side-menu');
        if (sideMenu && !sideMenu.contains(event.target)) {
          isMobileMenuVisible.value = false;
        }
      }
    };

    const handleCommand = (command='zh') => {
      locale.value = command;
    };

    // 主题切换处理函数
    const handleThemeChange = (theme) => {
      // 移除当前主题类
      document.body.classList.remove(`theme-${currentTheme.value}`);
      
      // 添加新主题类
      document.body.classList.add(`theme-${theme}`);
      
      // 更新当前主题
      currentTheme.value = theme;
      
      // 保存主题设置到本地存储
      localStorage.setItem("theme", theme);
    };

    const handleUserCommand = (command) => {
      if (command === 'logout') {
        logout();
      } else if (command === 'profile') {
        router.push('/profile');
      }
    };

    const toggleTheme = () => {
      // 主题切换逻辑
      ElMessage.info("主题切换功能待实现");
    };

    const logout = () => {
      // 1. 清除本地token
      localStorage.removeItem("token");
      localStorage.removeItem("user");
      // 2. 提示成功并跳转到登录页
      ElMessage.success("退出登录成功");
      router.push("/login");
    };

    // 获取用户信息
    const getUserInfo = () => {
      const user = JSON.parse(localStorage.getItem('user') || '{}');
      return user.nickName || '未登录';
    };

    const userName = ref(getUserInfo());

    // 窗口控制函数
    const minimizeWindow = () => {
      // 最小化窗口逻辑
      ElMessage.info("最小化窗口功能待实现");
    };

    const maximizeWindow = () => {
      // 最大化窗口逻辑
      ElMessage.info("最大化窗口功能待实现");
    };

    const closeWindow = () => {
      // 关闭窗口逻辑
      ElMessage.info("关闭窗口功能待实现");
    };

    // 监听窗口大小变化
    onMounted(() => {
      checkIsMobile();
      window.addEventListener('resize', checkIsMobile);
      document.addEventListener('click', hideMobileMenu);
      
      // 应用保存的主题
      const savedTheme = localStorage.getItem("theme") || "white";
      handleThemeChange(savedTheme);
    });

    onBeforeUnmount(() => {
      window.removeEventListener('resize', checkIsMobile);
      document.removeEventListener('click', hideMobileMenu);
    });

    return {
      userName,
      searchQuery,
      isMobile,
      isMobileMenuVisible,
      handleCommand,
      handleThemeChange,
      handleUserCommand,
      toggleTheme,
      logout,
      minimizeWindow,
      maximizeWindow,
      closeWindow,
      toggleMobileMenu
    };
  },
};
</script>

<style scoped>
@import url(@/style/index.css);

.layout-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.main-content {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.side-menu {
  width: 200px;
  background-color: var(--gray-1);
  box-sizing: border-box;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  overflow-y: auto;
}

.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.top-menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--white);
  border-bottom: 1px solid var(--border-color);
  height: 60px;
  box-sizing: border-box;
}

.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  margin-right: 10px;
  color: #333;
}

.top-menu-left {
  display: flex;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
  margin-right: var(--spacing-xl);
}

.logo-img {
  height: 30px;
  margin-right: 10px;
}

.logo-text {
  font-size: 18px;
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}

.top-menu-center {
  flex: 1;
  display: flex;
  justify-content: center;
}

.search-box {
  display: flex;
  align-items: center;
  width: calc(200px + var(--spacing-xl));
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  overflow: hidden;
}

.search-input {
  flex: 1;
  padding: 8px 12px;
  border: none;
  outline: none;
  font-size: 14px;
}

.search-btn {
  padding: 8px 12px;
  background-color: #f5f5f5;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
}

.search-btn:hover {
  background-color: #e8e8e8;
}

.top-menu-right {
  display: flex;
  align-items: center;
}

.window-controls {
  display: flex;
  margin-right: var(--spacing-md);
}

.control-btn {
  width: 30px;
  height: 30px;
  border: none;
  background-color: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  margin-left: var(--spacing-xs);
  transition: background-color 0.3s;
}

.control-btn:hover {
  background-color: #f0f0f0;
}

.minimize-btn:hover {
  background-color: #f0f0f0;
}

.maximize-btn:hover {
  background-color: #f0f0f0;
}

.close-btn:hover {
  background-color: #ff4d4f;
  color: white;
}

/* 用户信息样式 */
.user-info {
  display: flex;
  align-items: center;
  margin-right: var(--spacing-md);
  cursor: pointer;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: 4px;
  transition: all 0.3s ease;
}

.user-info:hover {
  background-color: #f0f0f0;
}

.user-info.btn-hover-effect:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: var(--spacing-sm);
  object-fit: cover;
}

.user-name {
  font-size: 14px;
  color: #333;
  margin-right: var(--spacing-xs);
}

.el-dropdown-link {
  cursor: pointer;
  color: #1890ff;
  margin-right: var(--spacing-md);
}

/* 移动端样式 */
@media (max-width: 767px) {
  .mobile-menu-btn {
    display: block;
  }
  
  .side-menu {
    display: none;
  }
  
  .side-menu.mobile-visible {
    display: block;
  }
}

/* 移动端优化 */
@media (max-width: 767px) {
  .top-menu {
    padding: var(--spacing-xs) var(--spacing-sm);
    height: 50px;
  }
  
  .mobile-menu-btn {
    font-size: 18px;
    margin-right: var(--spacing-sm);
  }
  
  .logo {
    margin-right: var(--spacing-md);
  }
  
  .logo-text {
    font-size: 16px;
  }
  
  .search-box {
    width: 150px;
  }
  
  .search-input {
    font-size: 14px;
    padding: 6px 10px;
  }
  
  .search-btn {
    padding: 6px 10px;
  }
  
  .window-controls {
    margin-right: var(--spacing-sm);
  }
  
  .control-btn {
    width: 25px;
    height: 25px;
  }
  
  .user-info {
    margin-right: var(--spacing-sm);
    padding: var(--spacing-xs);
  }
  
  .user-avatar {
    width: 24px;
    height: 24px;
  }
  
  .user-name {
    font-size: 13px;
    margin-right: var(--spacing-xs);
  }
  
  .el-dropdown-link {
    font-size: 13px;
    margin-right: var(--spacing-sm);
  }
}
</style>